<script setup>
import { Link } from '@inertiajs/vue3'
import { ClockIcon, EyeIcon } from '@heroicons/vue/24/outline'

// 添加日期格式化函数
const formatDate = (dateString) => {
    if (!dateString) return ''
    return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
}

defineProps({
    post: {
        type: Object,
        required: true
    },
    showImage: {
        type: Boolean,
        default: false
    }
})
</script>

<template>
    <!-- 优化：增强卡片视觉深度和hover效果 -->
    <article class="
        bg-white dark:bg-gray-800 
        rounded-xl
        border border-gray-100 dark:border-gray-700/50
        shadow-sm
        hover:shadow-xl hover:shadow-orange-100/50 dark:hover:shadow-orange-900/20
        hover:border-orange-200 dark:hover:border-orange-800
        transition-all duration-300
        hover:-translate-y-1
        overflow-hidden
        group
    ">
        <Link :href="route('blog.posts.show', post.slug)" class="block">
            <!-- 图片区域优化：添加缩放和遮罩效果 -->
            <div v-if="post.featured_image && showImage" class="relative overflow-hidden">
                <img 
                    :src="post.featured_image" 
                    :alt="post.title" 
                    class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" 
                />
                <!-- 图片遮罩层 -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
            <div class="p-5">
                <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-3">
                    <!-- 优化：增强分类标签样式 -->
                    <Link 
                        v-if="post.category" 
                        :href="route('blog.categories.show', post.category.slug)" 
                        class="
                            inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                            bg-orange-50 dark:bg-orange-900/30 
                            text-orange-700 dark:text-orange-300
                            border border-orange-200 dark:border-orange-800
                            hover:bg-orange-100 dark:hover:bg-orange-900/50
                            transition-colors
                        "
                    >
                        {{ post.category?.name }}
                    </Link>
                    <div class="flex items-center">
                        <ClockIcon class="w-4 h-4 mr-1" />
                        <time :datetime="post.published_at">{{ formatDate(post.published_at) }}</time>
                    </div>
                </div>
                <!-- 优化：增强标题视觉层次 -->
                <h2 class="
                    text-base font-bold text-gray-900 dark:text-white mb-2 line-clamp-2
                    group-hover:text-orange-600 dark:group-hover:text-orange-400
                    transition-colors
                ">
                    {{ post.title }}
                </h2>
                <p v-if="post.excerpt" class="text-xs text-gray-500 dark:text-gray-400 mb-3 line-clamp-2">
                    {{ post.excerpt }}
                </p>
                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                    <div class="flex items-center gap-2">
                        <img :src="post.author.profile_photo_url" :alt="post.author.name" class="w-5 h-5 rounded-full ring-1 ring-gray-100 dark:ring-gray-700" />
                        {{ post.author.name }}
                    </div>
                    <div class="flex items-center gap-1">
                        <EyeIcon class="w-4 h-4" />
                        {{ post.views || 0 }}
                    </div>
                </div>
            </div>
        </Link>
    </article>
</template> 